<template>
  <div class="detail">
    <detail-nav-bar
      class="detailNav"
      @tabClick="tabClick"
      ref="detailNav"
    ></detail-nav-bar>
    <scroll
      class="wrapper"
      ref="scroll"
      @scrollPlace="scrollPlace"
      :probe-type="3"
    >
      <detail-swiper
        :topImages="topImages"
        class="detailswiper"
      ></detail-swiper>
      <detail-good-info :goods="goods"></detail-good-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <div class="itemImages">
        <img
          v-for="(item, index) in detailImages"
          :key="index"
          :src="item"
          alt=""
        />
      </div>
      <detail-params
        :itemParams="itemParams"
        ref="detailParams"
      ></detail-params>
      <detail-comment
        :itemComment="itemComment"
        ref="detailComment"
      ></detail-comment>
      <goods-list :goods="itemRecommend" ref="detailRecommend"></goods-list>
    </scroll>
    <detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
    <back-top @click.native="backtopClick" v-show="isBackTopShow"></back-top>
    <toast :message="toastMsg" ref="toast"></toast>
  </div>
</template>

<script>
import DetailNavBar from "./components/DetailNavBar.vue";
import DetailSwiper from "./components/DetailSwiper.vue";

import {
  getDetail,
  Goods,
  Shop,
  GoodsParam,
  getRecommend,
} from "network/detail.js";
import { debounce } from "common/utils.js";
import DetailGoodInfo from "./components/DetailGoodInfo.vue";
import DetailShopInfo from "./components/DetailShopInfo.vue";
import Scroll from "../../components/common/BetterScroll/Scroll.vue";
import DetailParams from "./components/DetailParams.vue";
import DetailComment from "./components/DetailComment.vue";
import GoodsList from "../../components/content/Good/GoodsList.vue";
import DetailBottomBar from "./components/DetailBottomBar.vue";
import { backTopClick } from "common/mixin.js";
import { mapActions } from "vuex";
import Toast from "../../components/common/Toast/Toast.vue";

export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailGoodInfo,
    DetailShopInfo,
    Scroll,
    DetailParams,
    DetailComment,
    GoodsList,
    DetailBottomBar,
    Toast,
  },
  mixins: [backTopClick],
  data() {
    return {
      id: null,
      topImages: [],
      goods: {},
      shop: {},
      detailImages: [],
      itemParams: {},
      itemComment: {},
      itemRecommend: [],
      themeTopY: [],
      getThemeTopY: null,
      toastMsg: "",
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
    getRecommend().then((res) => {
      // console.log(res);
      this.itemRecommend = res.data.data.list;
    });
    this.getThemeTopY = debounce(() => {
      //下一帧，全部渲染完回调，dom渲染完不等于图片渲染完毕
      this.$nextTick(() => {
        this.themeTopY = [];
        this.themeTopY.push(0);
        this.themeTopY.push(this.$refs.detailParams.$el.offsetTop - 50);
        this.themeTopY.push(this.$refs.detailComment.$el.offsetTop - 50);
        this.themeTopY.push(this.$refs.detailRecommend.$el.offsetTop - 50);
        // console.log(this.themeTopY);
      });
    }, 200);
  },
  mounted() {
    // const refresh = debounce(this.$refs.scroll.imageRefresh, 300);
    this.$bus.$on("detailLoad", () => {
      this.getThemeTopY();
    });
  },
  methods: {
    getDetail() {
      getDetail(this.id).then((res) => {
        // console.log(res);
        const detailItem = res.data.result;
        this.topImages = detailItem.itemInfo.topImages;

        //商品信息
        this.goods = new Goods(
          detailItem.itemInfo,
          detailItem.columns,
          detailItem.shopInfo.services
        );
        //店铺信息
        this.shop = new Shop(detailItem.shopInfo);
        //图片
        this.detailImages = detailItem.detailInfo.detailImage[0].list;
        //商品参数
        this.itemParams = new GoodsParam(
          detailItem.itemParams.info,
          detailItem.itemParams.rule
        );
        //评论信息
        this.itemComment = detailItem.rate.list[0];
      });
    },

    tabClick(index) {
      switch (index) {
        case 0:
          this.$refs.scroll.scrollToPlace(0, -this.themeTopY[0], 200);
          break;
        case 1:
          this.$refs.scroll.scrollToPlace(0, -this.themeTopY[1], 200);
          break;
        case 2:
          this.$refs.scroll.scrollToPlace(0, -this.themeTopY[2], 200);
          break;
        case 3:
          this.$refs.scroll.scrollToPlace(0, -this.themeTopY[3], 200);
          break;
      }
      this.$refs.detailNav.currentIndex = index;
      this.$refs.detailNav.currentIndex = index;
    },
    scrollPlace(position) {
      this.currentY = position.y - 50;
      switch (true) {
        case this.currentY > -this.themeTopY[1]:
          this.$refs.detailNav.currentIndex = 0;
          break;
        case -this.themeTopY[2] < this.currentY &&
          this.currentY < -this.themeTopY[1]:
          this.$refs.detailNav.currentIndex = 1;
          break;
        case -this.themeTopY[3] < this.currentY &&
          this.currentY < -this.themeTopY[2]:
          this.$refs.detailNav.currentIndex = 2;
          break;
        case this.currentY < -this.themeTopY[3]:
          this.$refs.detailNav.currentIndex = 3;
          break;
      }

      this.isBackTopShow = position.y < -1000;
    },
    ...mapActions(["addCart"]),
    addToCart() {
      //获取需要展示的信息
      const production = {};
      production.img = this.topImages[0];
      production.title = this.goods.title;
      production.price = this.goods.lowPrice;
      production.id = this.id;

      //这么做可以实现，但是Vuex不建议私自越过mutation修改state
      // this.$store.cartList.push(production)

      //mutation内
      // this.$store.commit('adddCart',production)

      //为了可阅读性，Vuex可跟踪，将addCart放到action内
      // this.$store.dispatch("addToCart", production).then((res) => {
      //   console.log(res);
      // });

      //这里用mapActions映射过来的
      this.addCart(production).then((res) => {
        //传统使用组件toast
        // this.toastMsg = res;
        // this.$refs.toast.show = true;
        // setTimeout(() => {
        //   // console.log(this);
        //   this.$refs.toast.show = false;
        //   this.toastMsg=''
        // }, 2000);

        //使用自定义的toast插件
        this.$toast.show(res, 2000);
      });
    },
  },
};
</script>

<style scoped>
.wrapper {
  height: calc(100% - 49px);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.detailNav {
  background-color: #fff;
}
.itemImages img {
  width: 100%;
}
</style>